<template>
	<!-- 商品组 -->
	<view class="diy-sharingGoods" :style="[{'background': background}]">
		<view class="goods-itemss" v-for="(dataItem,index) in dataList" :key="dataItem.goods_id">
			<form @submit="_onTargetGoods" report-submit="true" :data-id="dataItem.goods_id">
				<button form-type="submit" class="btn-normal dis-flex" >
					<!-- 商品图片 -->
					<view class="goods-itemss_left">
						<image mode="aspectFill" :src="dataItem.image"></image>
					</view>
					<view class="goods-itemss_right">
						<!-- 商品名称 -->
						<view v-if="itemStyle.show.goodsName" class="goods-itemss_title twolist-hidden">
							<text>{{ dataItem.goods_name }}</text>
						</view>
						<view class="goods-itemss_desc">
							<!-- 商品卖点 -->
							<view v-if="itemStyle.show.sellingPoint" class="desc-selling_point onelist-hidden">
								<text>{{ dataItem.selling_point }}</text>
							</view>
							<!-- 拼团信息 -->
							<view class="desc-situation">
								<text class="iconfont icon-pintuan_huaban"></text>
								<text class="people">{{ dataItem.people }}人团</text>
								<text class="col-9">已有{{ dataItem.goods_sales }}人进行拼团</text>
							</view>
							<!-- 商品价格 -->
							<view class="desc_footer">
								<text class="price_x" v-if="itemStyle.show.sharingPrice">¥{{ dataItem.sharing_price }}</text>
								<text class="price_y col-9" v-if="itemStyle.show.linePrice && dataItem.line_price > 0">¥{{ dataItem.line_price }}</text>
							</view>
						</view>
						<view class="btn-settlement">去拼团</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			paddingTop() {
				return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			},
			background() {
				return this.itemStyle.background;
			},
			paddingLeft() {
				return uni.upx2px(this.itemStyle.paddingLeft * 2) + 'px';
			}
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			//跳转
			menuClick(e) {
				let url = e.currentTarget.dataset.url;
				this.navigationTo({
					//只能跳转到程序内页面
					url: url
				});
			},

			/**
			 * 跳转商品详情页
			 */
			_onTargetGoods(e) {
				// 记录formid
				this.saveFormId(e.formId);
				uni.navigateTo({
					url: '/pages/sharing/goods/index?goods_id=' + e.target.dataset.id,
				});
			},
		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 商品组 */

	.diy-sharingGoods {
		padding: 20upx;
	}

	.goods-itemss {
		height: 320upx;
		margin-bottom: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		background: #fff;
	}

	.goods-itemss:last-child {
		margin-bottom: 0;
	}

	/* 商品图片 */

	.goods-itemss_left {
		display: flex;
		width: 40%;
		background: #fff;
		align-items: center;
	}

	.goods-itemss_left image {
		display: block;
		width: 240upx;
		height: 240upx;
	}

	.goods-itemss_right {
		position: relative;
		width: 60%;
	}

	/* 商品名称 */

	.goods-itemss_right .goods-itemss_title {
		height: 72upx;
		margin-top: 20upx;
		font-size: 28upx;
		line-height: 1.3;
		color: #333;
	}

	.goods-itemss_desc {
		margin-top: 16upx;
	}

	/* 商品卖点 */

	.desc-selling_point {
		width: 400upx;
		height: 32upx;
		font-size: 24upx;
		line-height: 1.4;
		color: #ff495e;
	}

	/* 拼团信息 */

	.desc-situation {
		margin-top: 12upx;
		font-size: 24upx;
		line-height: 1.3;
		color: rgb(240, 60, 60);
	}

	.desc-situation .people {
		margin: 0 12upx;
	}

	/* 商品价格 */

	.desc_footer {
		margin-top: 12upx;
		font-size: 24upx;
	}

	.desc_footer .price_x {
		margin-right: 20upx;
		color: rgb(240, 60, 60);
		font-size: 28upx;
	}

	.desc_footer .price_y {
		text-decoration: line-through;
	}

	/* 去拼团按钮 */

	.goods-itemss .btn-settlement {
		position: absolute;
		right: 0;
		bottom: 0;
		padding: 0 28upx;
		border-radius: 40upx;
		background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
		box-shadow: 0 4upx 20upx -4upx rgb(235, 53, 107);
		font-size: 28upx;
		line-height: 54upx;
		text-align: center;
		color: #fff;
	}
</style>
